<template>
  <div class="contentWrap">
    <div class="box">
      <h1>周期</h1>
      <div class="CheckboxGroup">
        <van-checkbox-group v-model="weekList" direction="horizontal">
          <van-checkbox :name="1" shape="square">周一</van-checkbox>
          <van-checkbox :name="2" shape="square">周二</van-checkbox>
          <van-checkbox :name="3" shape="square">周三</van-checkbox>
          <van-checkbox :name="4" shape="square">周四</van-checkbox>
          <van-checkbox :name="5" shape="square">周五</van-checkbox>
        </van-checkbox-group>
      </div>
      <h1>定时</h1>
      <div class="timeSelector">
        <field
          class="rightField"
          right-icon="underway-o"
          label-width="0"
          readonly
          clickable
          name="datetimePicker"
          :value="time"
          label=""
          placeholder="开灯时间"
          @click="showPickerTime = true"
        />
        <popup v-model="showPickerTime" position="bottom">
          <datetime-picker
            type="time"
            title="开灯时间"
            @confirm="onConfirmTime"
            @cancel="showPickerTime = false"
          />
        </popup>
        <div
          style="display: flex;align-items: center; width: 10%;justify-content: center"
        >
          —
        </div>
        <field
          class="rightField"
          right-icon="underway-o"
          label-width="0"
          readonly
          clickable
          name="datetimePicker"
          :value="time2"
          label=""
          placeholder="关灯时间"
          @click="showPickerTime2 = true"
        />
        <popup v-model="showPickerTime2" position="bottom">
          <datetime-picker
            type="time"
            title="关灯时间"
            @confirm="onConfirmTime2"
            @cancel="showPickerTime2 = false"
          />
        </popup>
      </div>
      <div class="room">
        <div class="roomItem" v-for="(item, index) in list" :key="index">
          <div class="roomTitle">{{ item.name }}</div>
          <div>
            <van-switch v-model="item.checked" />
          </div>
        </div>
      </div>
      <div class="btnWrap">
        <van-button type="primary" @click="updateSchedule">保 存</van-button>
      </div>
    </div>
    <div class="box" style="margin-top: 20px">
      <h1>定时计划</h1>
      <div v-for="(item, index) in planList" :key="index">
        <van-row>
          <van-col span="1"> {{ index + 1 }}. </van-col>
          <van-col span="23">
            每{{ item.week }}, {{ item.startTime.substr(0, 5) }}打开,
            {{ item.endTime.substr(0, 5) }}关闭, {{ item.room }}的灯光；
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Checkbox,
  CheckboxGroup,
  Field,
  Popup,
  DatetimePicker,
  Switch,
  Button,
  Toast,
  Row,
  Col
} from "vant";
import { queryAllSchedule, updateSchedule } from "@/api/Light";
import classList from "@/mock/classroom";
export default {
  components: {
    VanCheckboxGroup: CheckboxGroup,
    VanCheckbox: Checkbox,
    Field,
    Popup,
    DatetimePicker,
    VanSwitch: Switch,
    VanButton: Button,
    VanRow: Row,
    VanCol: Col
  },
  data() {
    let list = [];
    for (let i of classList) {
      list.push({
        name: i.name,
        checked: false
      });
    }
    return {
      list: list,
      weekList: [],
      planList: [],
      time: "",
      showPickerTime: false,
      time2: "",
      showPickerTime2: false
    };
  },
  mounted() {
    this.queryAllSchedule();
  },
  methods: {
    onConfirmTime(value) {
      this.time = value;
      this.showPickerTime = false;
    },
    onConfirmTime2(value) {
      this.time2 = value;
      this.showPickerTime2 = false;
    },
    async queryAllSchedule() {
      this.planList = [];
      let res = await queryAllSchedule();
      if (res.code === 0) {
        for (let i = 1; i <= 5; i++) {
          let item = res.result.find(j => j.day === i && j.enable);
          if (item) {
            this.planList.push({
              week: this.filterWeek(i),
              startTime: item.startTime,
              endTime: item.endTime,
              room: item.room
            });
          }
        }
      }
    },
    filterWeek(num) {
      let result = "";
      switch (num) {
        case 1:
          result = "周一";
          break;
        case 2:
          result = "周二";
          break;
        case 3:
          result = "周三";
          break;
        case 4:
          result = "周四";
          break;
        case 5:
          result = "周五";
          break;
        default:
          break;
      }
      return result;
    },
    // 设置定时任务
    async updateSchedule() {
      let params = [];
      let roomList = [];
      this.list.forEach(i => {
        if (i.checked) {
          roomList.push(i.name);
        }
      });
      if (!this.weekList.length) {
        Toast.fail("请至少选择一个周期");
        return;
      }
      if (!this.time || !this.time2) {
        Toast.fail("请选择时间范围");
        return;
      }
      // if (!roomList.length) {
      //   Toast.fail('请至少选择一间教室')
      //   return
      // }
      // console.log(this.formList)
      params = this.weekList.map(i => {
        let result = {};
        result.day = i;
        result.enable = true;
        result.startTime = this.time + ":00";
        result.endTime = this.time2 + ":00";
        result.room = roomList.join(",");
        return result;
      });
      let res = await updateSchedule(params);
      if (res.code === 0) {
        Toast.success("设置成功");
        await this.queryAllSchedule();
      } else {
        Toast.fail(res.msg);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.contentWrap {
  width: 100%;
  box-sizing: border-box;
  padding: 25px 5%;
  .box {
    width: 100%;
    /*height: 100%;*/
    background: #ffffff;
    box-shadow: 0px 1px 2px 0px #cccccc;
    border-radius: 5px;
    padding: 20px 5%;
    box-sizing: border-box;
    .CheckboxGroup {
      margin-bottom: 30px;
      .van-checkbox--horizontal {
        width: 20%;
        margin-right: 0;
      }
      /deep/ .van-checkbox__icon {
        font-size: 15px;
        border: 1px solid #2eb0fc;
      }
    }
    .timeSelector {
      margin-bottom: 35px;
      display: flex;
      .van-cell {
        position: unset;
        background: rgba(102, 102, 102, 0);
        border: 2px solid #1e9bfa;
        border-radius: 10px;
        /deep/ .van-field__label {
          color: white;
        }
        /deep/ .van-field__control {
          background-color: white;
          color: #666666;
          border-radius: 5px 0 0 5px;
          box-sizing: border-box;
          padding-left: 10px;
        }
      }
      .rightField {
        padding: 5px 18px 5px 0;
        width: 45%;
      }
    }
    .room {
      .roomItem {
        display: flex;
        justify-content: space-between;
        margin-bottom: 25px;
        .roomTitle {
          font-size: 15px;
          font-family: PingFang SC Medium, PingFang SC Medium-Medium;
          font-weight: 500;
          color: #333333;
        }
        .van-switch {
          font-size: 12px;
        }
        .van-switch--on {
          background-color: rgba(102, 188, 238, 0.46);
          /deep/ .van-switch__node {
            background: linear-gradient(#58e9ff 0%, #1e9bfa 100%);
            box-shadow: 0px 1px 2px #226eaf;
          }
        }
      }
    }
    .btnWrap {
      margin-top: 20px;
      width: 100%;
      background: transparent;
      text-align: center;
      .van-button--normal {
        width: 60%;
        height: 30px;
        border-radius: 15px;
        font-size: 15px;
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: 500;
        color: #ffffff;
        letter-spacing: 3px;
        border: none;
      }
      .van-button--primary {
        background: linear-gradient(#58e9ff 0%, #1e9bfa 100%);
        box-shadow: 0px 1px 2px #226eaf;
      }
    }
  }
}
</style>
